<template>
  <div class="number-select-box">
    <div class="select-row border-bottom">
      <lottery-box-shengxiao
        ref="lotterybox"
        class="lottery-box-adjust"
        :activeSwitchIndex="activeSwitchIndex"
        v-for="(number, index) in item.numbers"
        :key="number.id"
        :number="number"
        :class="number.selected ? 'active' : ''"
        @click.native="handleBallSelect(index)">
      </lottery-box-shengxiao>
    </div>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxShengxiao from '@/components/base/lottery-box-shengxiao/lottery-box-shengxiao'
import TailBox from '@/components/tail-box/tail-box'
import { mapMutations, mapGetters } from 'vuex'
export default {
  components: {
    LotteryBoxShengxiao,
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          place: {
            context: '',
            position: 0
          },
          numbers: [
            {
              id: 1,
              number: 0,
              selected: false,
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                }
              ]
            }
          ]
        }
      }
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      
    }
  },
  methods: {
     handleBallSelect(index, type) {
      let numbers = this.clonedItem.numbers
      numbers[index].selected = numbers[index].selected ? false : true
      // 选中后赔率变金额
      if (numbers[index].selected) {
        numbers[index].parameter[this.activeSwitchIndex].parameter = numbers[index].parameter[this.activeSwitchIndex].number
        // console.log(parameter)
        numbers[index].parameter[this.activeSwitchIndex].number = this.getUnitPrice 
        numbers[index].unitPrice = this.getUnitPrice 
      } else {
        numbers[index].parameter[this.activeSwitchIndex].number = numbers[index].parameter[this.activeSwitchIndex].parameter
        numbers[index].unitPrice = 0
      }
      this.$emit('click', this.clonedItem)

    },
    // 清空按钮清空选中状态
    handleBtnClear() {
      this.clear()
    },
    clear() {
      this.clonedItem.numbers.forEach(item => {
        item.selected = false
        // 清空状态时将金额清除
        if(item.parameter[this.activeSwitchIndex].parameter) {
          item.parameter[this.activeSwitchIndex].number = item.parameter[this.activeSwitchIndex].parameter
        }
      })
      this.$emit('click', this.clonedItem)
    },
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    },
    ...mapGetters('lottery', ['getUnitPrice', 'getUnitRate'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .active >>> .box-inner
    .left 
      .iconfont 
        -webkit-text-fill-color $color-ball-red !important
        background-image none
    .center
      .context 
        color $color-ball-red
        
          

  .number-select-box 
    .select-row
      box-sizing border-box 
      display flex 
      justify-content space-between
      flex-wrap wrap
      padding 0 20px
      .lottery-box-adjust 
        margin-bottom 10px 
        width calc((100% - 40px) / 4) 
        &.active 
          border 1px solid $color-ball-red 
          background rgba($color-ball-red, 0.102)
          box-sizing border-box

       
          

</style>